<template>
    <div >
         <div class="Enterprise">
             <div class="Enterprise_banner">
                 <div class="enterprise_banner_box">
                     <Carousel  autoplay  :autoplaySpeed=5000  :radius-dot=true dots="outside" arrow="always">
                         <Carousel-item v-for="item in bannerData">
                             <div class="enterprise_banner_item">
                                 <div class="en_banner_item_left">
                                     <div class="en_banner_item_title">{{item.title}}</div>
                                     <div class="en_banner_item_txt">{{item.describe}}{{item.describe}}</div>
                                     <div class="en_banner_item_price">{{item.price}}</div>
                                     <div class="en_banner_item_btn">
                                         立即下载使用
                                     </div>
                                 </div>
                                 <div class="en_banner_item_right">
                                     <div class="en_banner_item_right_img">
                                         <img :src="item.imgurl" alt="">
                                     </div>
                                     <!--<div class="en_banner_item_right_mark"></div>-->
                                 </div>
                             </div>
                         </Carousel-item>
                     </Carousel>
                 </div>

            </div>
            <div class="Enterprise_cont">
                <div class="Enterprise_cont_box">
                    <div class="Enterprise_cont_menu">
                        <!--<Tabs active-key="key1" :animated="false" @on-click="delIndex">
                            <Tab-pane :label="item.CommodityClassName" :key="item.Id"  v-for="item in typeData" @click="qqq">
                                <div class="menu_item" ref="menu_item">
                                    <div class="menu_item_top">
                                            <div  v-for="(item,index) in priseData" @click="change(index)"
                                                 :class="['menu_item_top_list',{'classChange': index == typeIndex}]">
                                                {{item.LabelName}}
                                            </div>
                                    </div>
                                    <div class="menu_item_cont">
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box" @click="goDeatil">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card" v-for="item in listData">
                                            <div class="card_box" @click="goDeatil">
                                                <div class="card_top">
                                                    &lt;!&ndash;<img src="../../assets/img/enterprise_item_top.png" alt="">&ndash;&gt;
                                                    <img :src="item.CommodityImgPath" alt="">
                                                    <div>
                                                        &lt;!&ndash;大件商品售后服务平台&ndash;&gt;
                                                        {{item.CommodityName}}
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    &lt;!&ndash;<img src="../../assets/img/enterprise_item_cont.png" alt="">&ndash;&gt;
                                                    <img :src="item.CommodityThumImgPath" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    &lt;!&ndash;用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...&ndash;&gt;
                                                    {{item.Introduction}}
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>{{item.Price}}元/年</span>
                                                </div>
                                            </div>
                                        </Card>

                                    </div>
                                </div>
                            </Tab-pane>
                          &lt;!&ndash;  <Tab-pane label="行业" key="key2">
                                <div class="menu_item" ref="menu_item">
                                    <div class="menu_item_top">
                                        <div  v-for="(item,index) in priseData" @click="change(index)"
                                              :class="['menu_item_top_list',{'classChange': index == typeIndex}]">
                                            {{item.LabelName}}
                                        </div>
                                    </div>
                                    <div class="menu_item_cont">
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                    </div>
                                </div>
                            </Tab-pane>
                            <Tab-pane label="用途" key="key3">
                                <div class="menu_item" ref="menu_item">
                                    <div class="menu_item_top">
                                        <div class="menu_item_top_list">IT互联网</div>
                                        <div class="menu_item_top_list">制造业</div>
                                        <div class="menu_item_top_list">贸易零售</div>
                                        <div class="menu_item_top_list">服务业</div>
                                        <div class="menu_item_top_list">教育培训</div>
                                        <div class="menu_item_top_list">建筑房产</div>
                                        <div class="menu_item_top_list">金融</div>
                                        <div class="menu_item_top_list">医疗医药</div>
                                        <div class="menu_item_top_list">政府单位</div>
                                        <div class="menu_item_top_list">物流运输</div>
                                    </div>
                                    <div class="menu_item_cont">
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>
                                        <Card class="menu_item_cont_card">
                                            <div class="card_box">
                                                <div class="card_top">
                                                    <img src="../../assets/img/enterprise_item_top.png" alt="">
                                                    <div>
                                                        大件商品售后服务平台
                                                    </div>
                                                </div>
                                                <div class="card_img">
                                                    <img src="../../assets/img/enterprise_item_cont.png" alt="">
                                                </div>
                                                <div class="card_txt">
                                                    用于大件高客单值商品售后退换货跟进及流程化处理，及上门安装申请、跟踪、批复、费...
                                                </div>
                                                <div class="card_footer">
                                                    <span>免费下载</span>
                                                    <span>98元/年</span>
                                                </div>
                                            </div>
                                        </Card>

                                    </div>
                                </div>
                            </Tab-pane>
                            <Tab-pane label="功能" key="key4">
                                <div class="menu_item" ref="menu_item">
                                    <div class="menu_item_top">
                                        <div class="menu_item_top_list">IT互联网</div>
                                        <div class="menu_item_top_list">制造业</div>
                                        <div class="menu_item_top_list">贸易零售</div>
                                        <div class="menu_item_top_list">服务业</div>
                                        <div class="menu_item_top_list">教育培训</div>
                                        <div class="menu_item_top_list">建筑房产</div>
                                        <div class="menu_item_top_list">金融</div>
                                        <div class="menu_item_top_list">医疗医药</div>
                                        <div class="menu_item_top_list">政府单位</div>
                                        <div class="menu_item_top_list">物流运输</div>
                                    </div>
                                    <div class="menu_item_cont">
                                        <Card class="menu_item_cont_card"></Card>
                                        <Card class="menu_item_cont_card"></Card>
                                        <Card class="menu_item_cont_card"></Card>
                                        <Card class="menu_item_cont_card"></Card>
                                        <Card class="menu_item_cont_card"></Card>
                                        <Card class="menu_item_cont_card"></Card>

                                    </div>
                                </div>
                            </Tab-pane>&ndash;&gt;
                        </Tabs>-->
                        <div class="Enterprise_cont_ul">
                            <ul>
                                <li :class="{'classul': index == ulIndex}" v-for="(item,index) in typeData" :key="item.Id" @click="changeType(index,item.Id)">
                                  {{item.CommodityClassName}}
                                </li>
                            </ul>
                        </div>
                        <div class="menu_item" ref="menu_item">
                            <div class="menu_item_top">
                                <div  v-for="(item,index) in priseData" @click="changeprise(index,item.Id)"
                                      :class="['menu_item_top_list',{'classChange': index == typeIndex}]">
                                    {{item.LabelName}}
                                </div>
                            </div>
                            <div class="menu_item_cont">
                                <Card class="menu_item_cont_card" v-for="item in listData">
                                    <div class="card_box" @click="goDeatil">
                                        <div class="card_top">
                                            <img :src="item.CommodityImgPath" alt="">
                                            <div>
                                                {{item.CommodityName}}
                                            </div>
                                        </div>
                                        <div class="card_img">
                                            <!--<img src="../../assets/img/enterprise_item_cont.png" alt="">-->
                                            <img :src="item.CommodityThumImgPath" alt="">
                                        </div>
                                        <div class="card_txt">
                                            {{item.Introduction}}
                                        </div>
                                        <div class="card_footer">
                                            <span>免费下载</span>
                                            <span>{{item.Price}}元/年</span>
                                        </div>
                                    </div>
                                </Card>
                            </div>
                        </div>

                        <div class="Enterprise_cont_menu_search">
                            <div class="search_box">
                                <div :class="['search_icon',tap==1 ? 'search_icon_y':'search_icon_n']" ref="search_icon" >
                                    <input type="text">
                                </div>
                                <div class="search_int" >
                                    <div :class="{search_int_mark:!isb,isshow:isb }"></div>
                                    <div class="search_int_hidden" @mouseover="showInt(1)" @click="hideInt"></div>
                                </div>

                            </div>

                        </div>
                        <div class="prise_page">
                            <div class="prise_loadtxt">点击加载更多</div>
                            <div class="showLoading prise_loadmore">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
import bannerImgUrl from 'assets/img/enterprise_banner_item.png'
import { mapActions,mapState } from "vuex";
import {HttpRs} from '../../stataic/staticApi.js'
import {PublicHttp} from '../../stataic/sign.js'
    export default {
        data(){
            return {
                tap:0,
                isb:false,
                refs_menu_item_height:'',
                refs_search_icon_width:'',
                /*分类样式*/
                ischange:false,
                /*获取分类*/
                typeData:'',
                /*筛选分类*/
                priseData:'',
                /*索引值*/
                typeIndex:-1,
                /*导航*/
                bannerData:[
                    {
                        title:'网上商城产品管理系统',
                        describe:'简化的进销存基础模型，只涉及物品的入库和出库，以及库存计算。利用聚合表实现库存实时统计，防止负库存出现。',
                        price:'98元/年',
                        imgurl:bannerImgUrl,
                        imgtxt:'这个图直接使用首页的经典案例980x600，成比例缩放至此，定宽580'
                    },
                    {
                        title:'网上商城产品管理系统',
                        describe:'简化的进销存基础模型，只涉及物品的入库和出库，以及库存计算。利用聚合表实现库存实时统计，防止负库存出现。',
                        price:'98元/年',
                        imgurl:bannerImgUrl,
                        imgtxt:'这个图直接使用首页的经典案例980x600，成比例缩放至此，定宽580'
                    },
                    {
                        title:'网上商城产品管理系统',
                        describe:'简化的进销存基础模型，只涉及物品的入库和出库，以及库存计算。利用聚合表实现库存实时统计，防止负库存出现。',
                        price:'98元/年',
                        imgurl:bannerImgUrl,
                        imgtxt:'这个图直接使用首页的经典案例980x600，成比例缩放至此，定宽580'
                    },
                    {
                        title:'网上商城产品管理系统',
                        describe:'简化的进销存基础模型，只涉及物品的入库和出库，以及库存计算。利用聚合表实现库存实时统计，防止负库存出现。',
                        price:'98元/年',
                        imgurl:bannerImgUrl,
                        imgtxt:'这个图直接使用首页的经典案例980x600，成比例缩放至此，定宽580'
                    },
                ],
                /*分类ID*/
                typeid:'',
                /*筛选ID*/
                priseid:'',
                /*搜索值*/
                keyword:'',
                /*列表数据*/
                listData:'',
                ulIndex:0
            }
        },
        created(){
//            this.getTypeData()
            this.FirstGetData()
            this.priseType()

//            this.$store.dispatch('handover_header',2)

//            HttpRs('http://192.168.3.237:5000/webapi/Community/Reply','get','212332323').then(function (response) {
//                console.log('请求主题回复测试')
//                console.log(response)
//            })

        },
        methods: {
            /*类型切换*/
            changeType(index,val){
                console.log(index)
                console.log(val)
                this.ulIndex = index
                this.typeIndex = -1
                this.typeid = val
                this.priseid = ''
                this.GetData()

            },
            /*搜索输入框*/
            showInt(e){
                this.tap = e
                this.isb = true
            },
            /*图标改变*/
            hideInt(){
                if(this.tap)
                    this.tap = 0
                else
                    this.tap = 1
            },
            /*分类切換*/
            changeprise(index,val){
                console.log(index)
                console.log(val)
              this.typeIndex = index
                this.priseid = val
                this.GetData()
            },
            /*跳转详情*/
            goDeatil(){
                this.$router.push({
                    path:'/enterprise/deatil'
                })
            },
            /*获取类型*/
            getTypeData(){
                /*请求获得分类*/
                return new Promise((resolve, reject)=>{
                    this.fetchs.GetDatasdes({
                        url:'/webapi/Commodity/QueryCommodityClass',
                        type:'get',
                        param:{

                        },
                        success:(ret)=>{
                            console.log('请求获得分类')
                            this.typeData = ret.data
                            this.typeid = ret.data[0].Id
                            resolve(ret)

                        },
                        error:(err)=>{
                            reject(err)
                        }
                    })
                })

            },
            /*筛选分类*/
            priseType(){
                this.fetchs.GetDatasdes({
                    url:'/webapi/Commodity/QueryCommodityLabel',
                    type:'get',
                    param:{

                    },
                    success:(ret)=>{
                        console.log('请求获得筛选分类')
                        console.log(ret)
                        this.priseData = ret.data
                        console.log(this.priseData)

                    },
                    error:(err)=>{

                    }
                })
            },
            /*首次获取数据*/
            FirstGetData(){
                var that = this
//                HttpRs('http://192.168.3.237:5001/webapi/Commodity/QueryCommodity?CommodityClassId='+this.typeid+'&LabelId='+this.priseid+'&KeyWord='+this.keyword,'get','').then(function (response) {
//                    console.log(66666666666666666666)
//                    console.log(response)
//                })
                this.getTypeData().then((ret)=>{
                    console.log(ret)
                    HttpRs('http://192.168.3.237:5001/webapi/Commodity/QueryCommodity?CommodityClassId='+this.typeid+'&LabelId='+this.priseid+'&KeyWord='+this.keyword,'get','').then(function (response) {
                        console.log('获得列表数据')
                        console.log(response)
                        that.listData = response.data.data
                        console.log(that.listData)

                    })
                })

               /* this.fetchs.GetDatasdes({
                    url:' /webapi/Commodity/QueryCommodity',
                    type:'get',
                    param:{
//                        CommodityClassId:this.typeid,
//                        LabelId:this.priseid,
//                        KeyWord:this.keyword,
                        CommodityClassId:'dd74a6be-5c52-4f05-a346-082b4e445eaa',
                        LabelId:'',
                        KeyWord:'',
                    },
                    success:(ret)=>{
                        console.log('请求获得数据')
                        console.log(ret)
//                        this.typeData = ret.data
//                        console.log(this.typeData)
                    },
                    error:(err)=>{

                    }
                })*/
            },
            /*切换获取数据*/
            GetData(){
                var that = this
                HttpRs('http://192.168.3.237:5001/webapi/Commodity/QueryCommodity?CommodityClassId='+this.typeid+'&LabelId='+this.priseid+'&KeyWord='+this.keyword,'get','').then(function (response) {
                    console.log(66666666666666666666)
                    console.log(response)
                    that.listData = response.data.data
                    console.log(that.listData)
                })

            },

        },
        components: {

        },
        computed: {
            ...mapState(['menuActive','article_list','classBlock_ID','iPage'])
        },
        mounted(){
            window.scrollTo(0,0)
            console.log(this.menuActive)
            console.log(this.article_list)
            console.log(this.classBlock_ID)
            console.log(this.iPage)
            console.log(this.$refs.search_icon.clientWidth)
//            this.refs_search_icon_width =this.$refs.search_icon.clientWidth

            /*获取节点宽度高度*/
//            this.refs_menu_item_height = this.$refs.menu_item.clientHeight
            /*设置节点的宽度高度*/
//            let change_height = this.$refs.menu_item.clientHeight
//            this.$refs.Enterprise_cont_bg.style.height =change_height+ 'px'

        },
        watch: {
//            refs_search_icon_width(){
//                console.log(11111)
//                console.log(this.$refs.search_icon.clientWidth)
//                return this.$refs.search_icon.clientWidth
//            }
        }
    }
</script>

<style scoped>
    .classChange{
        background-color: rgba(49, 160, 227, 1)!important;
        color: white!important;
    }
    .classul{
        border-bottom:3px solid rgba(49, 160, 227, 1)!important;
        color: rgba(49, 160, 227, 1);
    }
/*-------------------应用商店样式-------------------*/

    .Enterprise{
        width:100%;
        height:100%;

    }
    .Enterprise_banner{
        width:100%;
        height:480px;
        background-image:url(/app/assets/img/enterptiser_banner.jpg) ;
        display: flex;
        justify-content: center;
        /*margin-top: 50px;*/
    }
    .enterprise_banner_box{
        width:1370px;
        height:400px;
        /*border:1px solid #333;*/
        margin-top: 60px;
    }
    .enterprise_banner_item{
        display: flex;
        justify-content: space-between;
        padding:0 85px;

    }
    .en_banner_item_left{
        width:480px;
        height:355px;
        margin-left: 40px;

    }
    .en_banner_item_title{
        font-family: '微软雅黑 Light', '微软雅黑 Regular', '微软雅黑';
        font-weight: 200;
        font-style: normal;
        font-size: 36px;
        color: #FFFFFF;
        line-height: 36px;
        margin:30px 0;
    }
    .en_banner_item_txt{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 22px;
        margin:20px 0;
    }
    .en_banner_item_price{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 12px;
    }
    .en_banner_item_btn{
        width: 180px;
        height: 40px;
        line-height: 40px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        color: #FFFFFF;
        text-align: center;
        font-size: 14px;
        margin:40px 0;
        border:1px solid white;
    }
    .en_banner_item_btn:hover{
        cursor: pointer;
    }
    .en_banner_item_right{
        width:580px;
    }
    .en_banner_item_right_img{
        /*border:1px solid white;*/
    }
    .en_banner_item_right_img img{
        width:580px;
        height:355px;
    }


    .Enterprise_cont{
        width:100%;
        display: flex;
        justify-content: center;
        position: relative;
        background-color: rgba(242, 242, 242, 1);
        margin-top: 80px;
        /*border:1px solid red;*/
    }
    .Enterprise_cont_box{
        width:1180px;


    }
    .Enterprise_cont_menu{
        position: relative;
        /*border:1px solid green;*/
        top:-80px;
    }
    .Enterprise_cont_ul{
        width:100%;
        height:80px;
    }
    .Enterprise_cont_ul>ul{
        height:74px;
        line-height: 78px;
        list-style: none;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
    }
    .Enterprise_cont_ul>ul>li{
        float: left;
        margin-right: 50px;
    }
     .Enterprise_cont_ul>ul>li:hover{
        color: rgba(49, 160, 227, 1);
        cursor: pointer;
    }

    .Enterprise_cont_menu_search{
        /*width:300px;*/
        height:80px;
        position: absolute;
        top:0;
        right:20px;
        right:0px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .search_box{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }
    .search_box>div{
        height:40px;
    }

    .search_icon{
        overflow: hidden;
    }
    .search_icon_y{
        width:190px;
        transition: all 0.5s;
    }
    .search_icon_n{
        width:0px;
        transition: all 0.5s;
    }
    .search_icon input{
        width:190px;
        height:40px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        border:none;
        padding-left: 10px;
        background-color:  rgba(242, 242, 242, 1);
        color: rgb(153, 153, 153);
    }
    .search_icon input:focus{
        border:none;
        outline:none;
    }
    .search_int{
        width:40px;
        text-align: center;
        line-height: 40px;
        background-color: rgba(242, 242, 242, 1);
        position: relative;
        z-index: 999;
    }
    .search_int_hidden{
        position: absolute;
        top:0;
        left:0;
        width:40px;
        height:40px;
        z-index: 9999;
    }
    .search_int_hidden:hover{
        cursor: pointer;
    }

    .search_int_mark{
        position: absolute;
        top:12px;
        left:12px;
        z-index: -1;
        width:16px;
        height:16px;
        display: inline-block;
        background-image:url(/app/assets/img/enperise_search_n.svg) ;
    }
    .isshow{
        position: absolute;
        top:12px;
        left:12px;
        z-index: -1;
        width:16px;
        height:16px;
        background-image:url(/app/assets/img/enterprise_search_selected.svg) ;
    }



    .menu_item{
        width:100%;
        /*border:1px solid blue;*/
        /*background-color: white;*/
    }
    .menu_item_top{
        width:100%;
        height:102px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: rgba(242, 242, 242, 1);
    }
    .menu_item_top_list{
        height: 32px;
        padding:0 15px;
        line-height: 32px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #666666;
        text-align: center;
        border:1px solid rgba(224, 224, 224, 1);
        margin-right: 20px;
        background-color: rgba(224, 224, 224, 0);;
    }
    .menu_item_top_list:hover{
        cursor: pointer;
    }
    .menu_item_cont{
        width:100%;
        height:100%;
        min-height: 380px;
        display: flex;
        justify-content: flex-start;
        /*justify-content: space-around;*/
        align-items: flex-start;
        flex-wrap: wrap;
    }



    /*单个商品*/
    .menu_item_cont_card{
        width:280px!important;
        height:370px!important;
        /*margin-right: 20px;*/
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }
    .menu_item_cont_card:nth-child(2n+1), .menu_item_cont_card:nth-child(4n+2){
        margin-right: 20px;
    }

    .card_box{
        width:240px;
        /*outline:1px solid red;*/
    }
    .card_box:hover{
        cursor: pointer;
    }
    .card_top{
        width:100%;
        margin:20px 0;
        height:40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .card_top>img{
        margin-right: 20px;
    }
    .card_top>div{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
    }
    .card_img{
        width:100%;
        height:180px;
    }
    .card_img>img{
        width:240px;
        height:180px;
    }
    .card_txt{
        height: 44px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #999999;
        line-height: 22px;
        margin-top:20px ;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .card_footer{
        width:100%;
        height:20px;
        margin-top: 10px;
    }
    .card_footer>span:nth-child(1){
        font-size: 14px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        color: #31A0E3;
        text-align: right;
        margin-right: 10px;
    }
    .card_footer>span:nth-child(2){
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #999999;
        line-height: 20px;
    }
    .prise_page{
        width:100%;
        /*border:1px solid red;*/
        margin-top:60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .prise_loadtxt{
        height:40px;
        line-height: 40px;
        margin-right: 10px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        color: #999999;
        text-align: center;
        font-size: 14px;
    }
    .prise_loadmore{
        /*display: inline-block;*/
        height:40px;
        vertical-align: super!important;
    }
    .prise_loadmore>span{
        width:8px;
        height:8px;
        display: inline-block;
    }




</style>